<template>
<div class="home">
    <h3>这是主页面</h3>   
    <div>
        <!-- namespaced无论为true还是false state中的demo是肯定存在的 -->
        <p>{{ $store.state.demo.a }}---{{ a }}</p>
        <!-- namespaced:false  getters,mutations,actions都会注册到全局-->
        <!-- <p>{{ $store.getters.doubleA }}</p>
        <p>{{ $store.getters.tripleA }}</p>
        <button @click="$store.commit('addA',10)">addA</button> -->

         <!-- namespaced:true   getters,mutations,actions都会注册到局部 demo:{xxx}-->
        <p>{{ $store.getters["demo/doubleA"] }}---{{ doubleA }}</p>
        <p>{{ $store.getters["demo/tripleA"] }}---{{ tripleA }}</p>
        <button @click="$store.commit('demo/addA',10)">addA</button>
        <button @click="addA()">addA</button>
       
    </div>

</div>
</template>

<script>
// @ is an alias to /src


import {mapState,mapGetters,mapMutations} from "vuex";

export default {
    name: 'HomeView',
    computed:{
        ...mapState("demo",["a"]),
        ...mapGetters("demo",["doubleA","tripleA"])

        // ...mapState("demo",{
        //     a:"a"
        // }),
        // ...mapGetters("demo",{
        //     doubleA:"doubleA",
        //     tripleA:"tripleA"
        // })
    },
    methods:{
        ...mapMutations("demo",["addA"])
        // ...mapMutations("demo",{
        //     addA:"addA"
        // })
    },  
    components: {

    },
    mounted(){
        // console.log(this);
        console.log(this.$store);
        // console.log(this.$store.getters);
    }
}
</script>
